<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="/scripts/jquery-3.4.1.min.js"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <script th:src="@{/layui/layui.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}" media="all"/>
    <link rel="icon" href="/img/logo.png" sizes="32x32">
    <title>code generate</title>
</head>
<body>
<form class="layui-form" lay-filter="my-form" target="rfFrame">
    <div class="layui-input-inline">
        <img class="logo-png" src="/img/logo.png">
        <div class="logo"><h1>code <span style="color: #fb8e00">generate</span></h1></div>
        <div class="logo1"><h5>Bootstrap your application</h5></div>
    </div>
    <fieldset class="layui-elem-field">
        <legend style="margin-left: 136px">项目基本信息</legend>
        <div class="layui-field-box" style="margin-left: 300px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">Group</label>
                    <div class="layui-input-inline">
                        <input type="text" name="group" required lay-verify="required"
                               value=""
                               class="layui-input"
                               placeholder="com.example">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">Artifact</label>
                    <div class="layui-input-inline">
                        <input type="text" name="artifact" required lay-verify="required"
                               value=""
                               class="layui-input"
                               placeholder="demo">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">作者</label>
                    <div class="layui-input-inline">
                        <input type="text" name="author" required lay-verify="required"
                               value=""
                               class="layui-input"
                               placeholder="author">
                    </div>
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend style="margin-left: 177px">应用架构</legend>
        <div class="layui-field-box" style="margin-left: 300px">
            <div class="my-card">
                <div class="layui-card">
                    <div class="layui-card-header"><input type="radio" name="templateCode" value="3"
                                                          title="项目模块" checked=""></div>
                    <div class="layui-card-body" style="color: #393D49">
                        项目模块包含 controller. service. mapper.
                    </div>
                </div>
            </div>
            <!--            <div class="my-card">-->
            <!--                <div class="layui-card">-->
            <!--                    <div class="layui-card-header"><input type="radio" name="templateCode" value="1"-->
            <!--                                                          title="项目模块"></div>-->
            <!--                    <div class="layui-card-body" style="color: #393D49">-->
            <!--                        controller,service,mapper文件-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class="my-card">-->
            <!--                <div class="layui-card">-->
            <!--                    <div class="layui-card-header"><input type="radio" name="templateCode" value="2"-->
            <!--                                                          title="单体项目"></div>-->
            <!--                    <div class="layui-card-body" style="color: #393D49">-->
            <!--                        单体多模块项目-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class="my-card">-->
            <!--                <div class="layui-card">-->
            <!--                    <div class="layui-card-header"><input type="radio" name="templateCode" value="4" title="千寻">-->
            <!--                    </div>-->
            <!--                    <div class="layui-card-body" style="color: #393D49">-->
            <!--                        项目模块包含 controller. service. mapper. -->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
        </div>
    </fieldset>


    <fieldset class="layui-elem-field">
        <legend style="margin-left: 197px">数据库</legend>
        <div class="layui-field-box" style="margin-left: 300px">
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="dbConnectionURL" required lay-verify="required"
                           value=""
                           id="url_input"
                           placeholder="必填数据库地址 例：jdbc:mysql://127.0.0.1:3306/"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">驱动</label>
                    <div class="layui-input-inline">
                        <select name="dbCode" lay-verify="required" checked="" 1>
                            <option value="1">MYSQL 5</option>
                            <option value="2">MYSQL 8</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dbUserName" required lay-verify="required"
                               value=""
                               class="layui-input"
                               placeholder="必填登录用户名 例：root">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dbPassword" required lay-verify="required"
                               value=""
                               class="layui-input"
                               placeholder="必填登录密码 例：root">
                    </div>
                </div>
            </div>

        </div>
    </fieldset>


    <fieldset class="layui-elem-field">
        <legend style="margin-left: 197px">目标表</legend>
        <div class="layui-field-box tableParamList" style="margin-left: 300px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">模块名称</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input moduleName" placeholder="必填项目模块名称">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">表名称</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input tableName" placeholder="必填数据库表名称">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">表前缀</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input tableNamePrefix"
                               placeholder="需要排除的表前缀 例:t_"
                               value="t_">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">模块名称</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input moduleName" placeholder="必填项目模块名称">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">表名称</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input tableName" placeholder="必填数据库表名称">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">表前缀</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input tableNamePrefix"
                               placeholder="需要排除的表前缀 例:t_"
                               value="t_">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">模块名称</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input moduleName" placeholder="必填项目模块名称">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">表名称</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input tableName" placeholder="必填数据库表名称">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">表前缀</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input tableNamePrefix"
                               placeholder="需要排除的表前缀 例:t_"
                               value="t_">
                    </div>
                </div>
            </div>

            <div class="layui-form-item ">
                <button type="button" class="layui-btn  layui-btn-sm add-inline" style="margin-left: 400px">
                    <i class="layui-icon">&#xe608;</i> 添加一行
                </button>
                <button type="button" class="layui-btn  layui-btn-sm remove-inline" style="margin-left: 30px">
                    <i class="layui-icon">&#xe640;</i> 移除一行
                </button>
            </div>
        </div>
    </fieldset>


    </br></br></br></br></br>
    <div class="submit">
        <div class="submit1">
            © 2020-2021
            </br>
            QQ:1400675645
            </br>
            ChenHao to create
        </div>
        <div class="submit2">
            <button class="layui-btn layui-btn-normal layui-btn-lg" lay-submit lay-filter="download">获取代码</button>
            <button class="layui-btn layui-btn-warm layui-btn-lg" lay-submit lay-filter="read">浏览代码</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-lg">重置</button>
        </div>
    </div>
</form>
<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
<script>
    layui.use(['layer', 'form'], function () {
        const form = layui.form;
        const layer = layui.layer;
        // 目标表追加
        $(".add-inline").click(function () {
            var addHtml = ' <div class="layui-form-item">\n' +
                '                <div class="layui-inline">\n' +
                '                    <label class="layui-form-label">模块名称</label>\n' +
                '                    <div class="layui-input-inline">\n' +
                '                        <input type="text" autocomplete="off" class="layui-input moduleName" placeholder="必填项目模块名称">\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="layui-inline">\n' +
                '                    <label class="layui-form-label">表名称</label>\n' +
                '                    <div class="layui-input-inline">\n' +
                '                        <input type="text" autocomplete="off" class="layui-input tableName" placeholder="必填数据库表名称">\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="layui-inline">\n' +
                '                    <label class="layui-form-label">表前缀</label>\n' +
                '                    <div class="layui-input-inline">\n' +
                '                        <input type="text" autocomplete="off" class="layui-input tableNamePrefix" placeholder="需要排除的表前缀 例:t_"\n' +
                '                               value="t_">\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </div>';
            $(".add-inline").parent().before(addHtml);
        })
        // 目标表移除一行
        $(".remove-inline").click(function () {
            if ($(".add-inline").parent().prev().length > 0) {
                $(".add-inline").parent().prev().remove();
            } else {
                layer.msg("<em style='color:red'>没有更多元素</em>", {icon: 2});
            }
        })
        //监听提交
        form.on('submit(download)', function (data) {
            const param = {};
            param["group"] = data.field.group;
            param["artifact"] = data.field.artifact;
            param["author"] = data.field.author;
            param["templateCode"] = data.field.templateCode;
            param["dbCode"] = data.field.dbCode;
            param["dbConnectionURL"] = data.field.dbConnectionURL;
            param["dbUserName"] = data.field.dbUserName;
            param["dbPassword"] = data.field.dbPassword;
            // 目标表
            const tableParamList = new Array();
            $(".tableParamList").children().each(function () {
                var moduleName = $(this).find(".moduleName").val();
                var tableName = $(this).find(".tableName").val();
                var tableNamePrefix = $(this).find(".tableNamePrefix").val();
                if (moduleName == null || moduleName === "" || tableName == null || tableName === "") {
                    return;
                }
                const tableParam = {};
                tableParam["moduleName"] = moduleName;
                tableParam["tableName"] = tableName;
                tableParam["tableNamePrefix"] = tableNamePrefix;
                tableParamList.push(tableParam);
            });
            if (tableParamList.length === 0) {
                layer.msg("<em style='color:red'>目标表至少应有一条记录</em>", {icon: 2});
                return false;
            }
            param["tableParamList"] = tableParamList;
            console.log(param);
            $.ajax({
                type: "POST",
                dataType: 'text',
                contentType: "application/json;charset=UTF-8",
                url: "/toGenerator",
                data: JSON.stringify(param),
                //请求成功
                success: function (result) {
                    var obj = JSON.parse(result);
                    console.log(obj)
                    if (obj.success) {
                        setCookie("group", param.group);
                        setCookie("artifact", param.artifact);
                        setCookie("author", param.author);
                        setCookie("templateCode", param.templateCode);
                        setCookie("dbCode", param.dbCode);
                        setCookie("dbConnectionURL", param.dbConnectionURL);
                        setCookie("dbUserName", param.dbUserName);
                        setCookie("dbPassword", param.dbPassword);
                        downloadFileByForm("/downloadZip?fileTargetSrc=" + obj.fileTargetSrc);
                        layer.msg("<em style='color:black'>代码获取成功</em>", {icon: 1});
                    } else if (obj.error) {
                        layer.msg("<em style='color:red'>" + obj.error + "</em>", {icon: 2});
                    }
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                }
            });
        });
        form.on('submit(read)', function (data) {
            const param = {};
            param["group"] = data.field.group;
            param["artifact"] = data.field.artifact;
            param["author"] = data.field.author;
            param["templateCode"] = data.field.templateCode;
            param["dbCode"] = data.field.dbCode;
            param["dbConnectionURL"] = data.field.dbConnectionURL;
            param["dbUserName"] = data.field.dbUserName;
            param["dbPassword"] = data.field.dbPassword;
            // 目标表
            const tableParamList = new Array();
            $(".tableParamList").children().each(function () {
                var moduleName = $(this).find(".moduleName").val();
                var tableName = $(this).find(".tableName").val();
                var tableNamePrefix = $(this).find(".tableNamePrefix").val();
                if (moduleName == null || moduleName === "" || tableName == null || tableName === "") {
                    return;
                }
                const tableParam = {};
                tableParam["moduleName"] = moduleName;
                tableParam["tableName"] = tableName;
                tableParam["tableNamePrefix"] = tableNamePrefix;
                tableParamList.push(tableParam);
            });
            if (tableParamList.length === 0) {
                layer.msg("<em style='color:red'>目标表至少应有一条记录</em>", {icon: 2});
                return false;
            }
            param["tableParamList"] = tableParamList;
            console.log(param);
            $.ajax({
                type: "POST",
                dataType: 'text',
                contentType: "application/json;charset=UTF-8",
                url: "/toGenerator",
                data: JSON.stringify(param),
                //请求成功
                success: function (result) {
                    var obj = JSON.parse(result);
                    console.log(obj)
                    if (obj.success) {
                        setCookie("group", param.group);
                        setCookie("artifact", param.artifact);
                        setCookie("author", param.author);
                        setCookie("templateCode", param.templateCode);
                        setCookie("dbCode", param.dbCode);
                        setCookie("dbConnectionURL", param.dbConnectionURL);
                        setCookie("dbUserName", param.dbUserName);
                        setCookie("dbPassword", param.dbPassword);
                        // 弹出代码浏览层
                        layer.open({
                            title: '源码查看'
                            , type: 2
                            , content: '/code?fileTargetSrc=' + obj.fileTargetSrc
                            , area: ['95%', '90%']
                        });


                    } else if (obj.error) {
                        layer.msg("<em style='color:red'>" + obj.error + "</em>", {icon: 2});
                    }
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                }
            });
        });

        // 表单设置cookie中的值
        var cookie = getCookie("group");
        if (cookie != null) {
            form.val("my-form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                "group": getCookie("group")
                , "artifact": getCookie("artifact")
                , "author": getCookie("author")
                , "templateCode": getCookie("templateCode")
                , "dbCode": getCookie("dbCode")
                , "dbConnectionURL": getCookie("dbConnectionURL")
                , "dbUserName": getCookie("dbUserName")
                , "dbPassword": getCookie("dbPassword")
            });
        }

    });

    // 两个参数，一个是cookie的名字，一个是值
    function setCookie(name, value) {
        var days = 7; //设置cookie保留7天
        var datime = new Date();
        datime.setTime(datime.getTime() + days * 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + value + ";aa=" + datime.toGMTString();
    }

    // 获取cookie的值
    function getCookie(name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) return (arr[2]);
        return null;
    }

    // 下载文件
    function downloadFileByForm(url) {
        var form = $("<form></form>").attr("action", url).attr("method", "post");
        form.append($("<input></input>").attr("type", "hidden").attr("name", "fileName"));
        form.appendTo('body').submit().remove();
    }
</script>

</body>
</html>